@extends("agent.layouts.main")
<style>
    #pre_img{
        width:180px;
        position:absolute;
        top:0;
        left:0;
        border:1px  dashed gray;
    }
    .my-div{
        text-align:center;
        line-height:130px;
        border:1px  dashed gray;
        cursor:pointer;
        transition:all .1s linear;
    }
    .my-div i{
        font-size:50px;
    }
    .my-div:hover{
        border-color:blue;
    }
</style>
<meta name="csrf-token" content="{{ csrf_token() }}">
@section("content")
<div class="container-fiuld p-3">
    <div class="card">
		<div class="card-body w-50">
			<form class="layui-form">
				<div class="input-group mb-3">
					<div class="input-group-prepend">
						<span class="input-group-text">提现联系人手机号</span>
					</div>
					<input type="text" class="form-control" name="mobile" required lay-verify="required" value="{{isset($account['mobile']) ? $account['mobile'] : ''}}" placeholder="（请填写公会老板的真实号码）">
				</div>

				<div class="input-group mb-3">
					<div class="input-group-prepend">
						<span class="input-group-text">支付宝账号</span>
					</div>
					<input type="text" class="form-control" name="alipay" required lay-verify="required" value="{{isset($account['alipay']) ? $account['alipay'] : ''}}" placeholder="（请填写真实的支付宝账号）">
				</div>

				<div class="input-group mb-3">
					<div class="input-group-prepend">
						<span class="input-group-text">支付宝姓名</span>
					</div>
					<input type="text" class="form-control" name="name" required lay-verify="required" value="{{isset($account['name']) ? $account['name'] : ''}}" placeholder="（与公会老板一致的开户名）">
				</div>

				<div class="row ml-0" style="margin-bottom:10rem">
					<div>
						<span class="input-group-text">支付宝收款码</span>
					</div>

					<div class="col-7">
					    <div class="position-relative my-div" style="width:130px;height:130px">
                            <img id="pre_img"/>
                            <i class="layui-icon layui-icon-add-1"></i>
                        </div>
                        <button class="layui-btn layui-btn-sm d-none" onclick="return false;" id="upload_img">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                        <input type="hidden" name="alipay_code" value="{{isset($account['alipay_code']) ? $account['alipay_code'] : ''}}">
                    </div>

					<!--<input type="text" class="form-control" name="alipay_code" required lay-verify="required" value="{{isset($account['alipay_code']) ? $account['alipay_code'] : ''}}" placeholder="（绑定之后无权自主可修改）">-->
				</div>
				
				@if(empty($account))
				<div class="text-center mt-3">
					<button class="layui-btn" lay-submit lay-filter="accountcreate" data-url="{{ route('accountcreate') }}" data-type="POST">提交</button>
					<button type="reset" class="btn btn-danger">重置</button>
				</div>
				@elseif($account['status'] == 2)
				<div class="text-center mt-3">
					<button class="layui-btn" lay-submit lay-filter="accountcreate" data-url="{{ route('accountcreate') }}" data-type="POST">提交</button>
					<button type="reset" class="btn btn-danger">重置</button>
				</div>
				@endif
				<div class="alert alert-info mt-3">
					@if(!empty($account) && $account['status'] == 0)
					<p class="mb-1 text-danger">你提交的信息正在审核中，请等待...</p>
					@elseif($account['status'] == 1)
					<p class="mb-1 text-primary">你提交的信息已审核通过</p>
					@elseif($account['status'] == 2)
					<p class="mb-1 text-danger">你提交的信息审核失败，请修改后重新提交</p>
					@endif
                    <strong>信息!</strong> 上传后不可自行修改，如需修改请联系专属客服
                </div>
			</form>
		</div>
		<div class="card-footer bg-transparent border-0">
		</div>
    </div>
</div>
@endsection
@section("js")
<script>
	layui.use(['form', 'ori'], function () {
		var form = layui.form,ori = layui.ori,$ = layui.$;
		@if(!empty($account['alipay_code'])) 
            $('#pre_img').attr('src', "{{$account['alipay_code']}}");
		@endif		
		form.on('submit(accountcreate)', function (data) {
			ori.submit($(this), data.field, function () {
				window.location.reload();
			});
			return false;
		});
		@if(empty($account) || $account['status'] == 2)
        $("#pre_img").css({"border":"none"});
		$(".my-div").click(function(){
		    $(this).css({"border":"none"});
		    $(".layui-btn.layui-btn-sm").click();
		})
		@else
		$(".my-div").css({"border":"none"});
		@endif
	});
	 layui.use(['upload', 'jquery'], function () {
        $ = layui.jquery;
        $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#upload_img', //绑定元素
            url: "/agent/agupload", //上传接口
            accept: 'images',
			data: {type:'alicodeimg'},
            done: function (res) {
                //上传完毕回调
                $('#pre_img').attr('src', res.msg);
                $('input[name="alipay_code"]').val(res.msg);
            }
            , error: function () {
                //请求异常回调
            }
        });
    });
</script>       
@endsection
